<template>
	<div class="popup">
		<popup ref="popupRef" title="发送消息" :async="true" width="550px" @confirm="handleSubmit" @close="handleClose">
			<div class="pr-8">
				<el-form ref="formRef" :model="formData" label-width="80px" :rules="formRules">
					<el-form-item label="发送对象" prop="account">
						<el-input v-model="formData.account" :rows="6" type="textarea"
							placeholder="请输入发送对象账号，多个请使用,隔开" />
					</el-form-item>
					<el-form-item label="发送内容" prop="notice_id">
						<el-select class="flex-1" v-model="formData.article_id" placeholder="请选择发送内容" clearable>
							<el-option v-for="item in articles" :key="item.id" :label="item.title" :value="item.id" />
						</el-select>
					</el-form-item>
				</el-form>
			</div>
		</popup>
	</div>
</template>

<script lang="ts" setup name="commonEdit">
	import type { FormInstance } from 'element-plus'
	import Popup from '@/components/popup/index.vue'
	import { sendNotice } from '@/api/consumer'
	import feedback from '@/utils/feedback'
	import { articleAll } from '@/api/article'

	const popupRef = shallowRef<InstanceType<typeof Popup>>()
	const emit = defineEmits(['success', 'close'])
	const formRef = shallowRef<FormInstance>()

	const articles = ref<Array<any>>([])
	// 表单数据
	const formData = reactive({
		account: '',
		article_id: ''
	})
	// 表单验证
	const formRules = reactive<any>({
		account: [{
			required: true,
			message: '请输入发送对象',
			trigger: ['blur']
		}],
		article_id: [{
			required: true,
			message: '请选择消息内容',
			trigger: ['blur']
		}],
	})

	const getData = async () => {
		articles.value = await articleAll({ cid: 5 })
	}

	// 获取详情
	const setFormData = async (data : Record<any, any>) => {
		let ids = data.account;
		formData.account = ids.join(',');
	}

	// 提交按钮
	const handleSubmit = async () => {
		await formRef.value?.validate()
		await sendNotice({ accounts: formData.account, article_id: formData.article_id })
		popupRef.value?.close()
		emit('success')
	}
	//打开弹窗
	const open = () => {
		popupRef.value?.open()
	}
	// 关闭回调
	const handleClose = () => {
		emit('close')
	}
	defineExpose({
		open,
		setFormData
	})
	getData()
</script>